<template>
    <div class="quick_registration">
        <!-- 头部页面 -->
        <div class="header">
            <mt-header title="快速挂号">
            <router-link to="/index/cyclo" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
            <!-- 选择日期,点击后相应日期变色 -->
            <get-date @click="dataYue"></get-date>
            <!-- 选择科室类别,点击后相应科室变色 -->
            <div class="keshi">
                <ul v-if="ks">
                <li v-for="(v,i) in ks.data" :key="i" @click="now=v.ksid,keshi=v.ks" :class="{active:now==v.ksid}">{{v.ks}}</li>
                </ul>
                <svg @click="tanchu" class="icon" aria-hidden="true"><use xlink:href="#icon-list"></use></svg>
                <mt-popup
                modal=false
                v-model="popupVisible"
                position="bottom">
                <ul class="tanchu_keshi" v-if="ks">
                    <li v-for="(v,i) in ks.data" :key="i" @click="now=v.ksid,keshi=v.ks,tanru()" >{{v.ks}}</li>
                </ul>
                <div class="button_center">
                <mt-button @click="tanru">取消</mt-button>
                </div>
                </mt-popup>
               
            </div>
        </div>
        <!-- 医生名片部分 -->
        <div class="doctor_card2" v-if="data">
            <doctor-card v-for="(v,i) in data.data" :key="i" style="width:95%;background-color:#fff;margin-bottom:2vh;" @click.native="$router.push(`/doctorDetail?${v.did}`)" :zv="v"></doctor-card>
        </div>
    </div>
</template>

<script>
import GetDate from "@/components/GetDate.vue"
import DoctorCard from '@/components/DoctorCard.vue'
import '../../assets/js/iconfont'
import { mapState } from 'vuex'

    export default{
        components: { GetDate,DoctorCard },
        data() {
            return {
                now: 1,
                popupVisible:false,
                data:null,
                ks:null,
                keshi:'皮肤科',
            }
        },
        methods: {
            dataYue(){

            },
            getData(){
                // this.axios.get('users/doctor').then(res=>{
                this.axios.get(`keshi_xu/${this.keshi}`).then(res=>{
                    this.data = res.data
                })
            },
            tanchu() {
                this.popupVisible = true
            },
            tanru(){
                this.popupVisible = false
            }
        },
        watch:{
            keshi(){
                this.getData()
            },
            Ydata(to){
                let arr = []
                this.ks.data.forEach(v => {
                    arr.push(v.ks)
                });
                this.axios.get(`keshi_xu/${arr[Math.floor(Math.random()*11)]}`).then(res=>{
                    this.data = res.data
                })
            }
        },
        computed: {
            ...mapState(['Ydata'])
        },
        mounted () {
            this.getData();
            this.axios.get(`users/index_tese`).then(res=>{
                this.ks = res.data
            })
        },
    }
</script>

<style lang="scss" scoped>
.quick_registration {
    background-color: #fff;
    
    .header {
        padding: 1vh 3vw;
        width: 94vw;
        background-color: #fff;
        position: fixed;
        .mint-header {
        margin-bottom: 3vh;
        color: #000;
        font-size: 5vw;
        background-color: transparent;
    }
    .keshi {
        width: 86vw;
        overflow: auto;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-y: auto;
        >ul{ 
            color: #989898;
            width: 228vw;
            display: flex;
            overflow: auto;
            li {
                background-color: #eee;
                box-sizing: content-box;
                padding: 2vw 3vw;
                margin: 3vh 0vw;
                margin-right: 2vw;
                border-radius: 3vw;
                &.active {
                    border: 2px solid #4c4f4f;
                    background-color: #fff;
                }
            }
        }
        .tanchu_keshi {
            width: 100vw;
            display: flex;
            flex-wrap: wrap;
            padding-left: 2vw;
            li {
                text-align: center;
                background-color: #eee;
                box-sizing: content-box;
                width: 18vw;
                padding: 2vw;
                margin-top: 2vw;
                margin-left: 2vw;
                border-radius: 3vw;
                
            }
        }
        .button_center {
            margin: 0;
            width: 100vw;
            text-align: center;
            .mint-button {
            margin: 3vh auto;
            width: 50vw;height: 5vh;
            border-radius: 5vh;
            background-color: #01ddb9;
            color: #fff;
        }
        }
        .icon { 
                    position: fixed;
                    top: 164px;
                    right: 6px;
                    width: 2.25em;
                    height: 2.25em;
                    vertical-align: -0.15em;
                    fill: currentColor;
                    overflow: hidden;
                }
    }
    .keshi::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
    }
    // 医生名片部分
    .doctor_card2 {
        &::before {
            display: block;
            content: '';
            width: 100%;
            height: 34vh;
        }
       margin-right: 0;
        padding: 1vh 3vw;
        background-color: #f3f5f4;
    }
}
</style>